﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航滚动到一定高底后吸顶，锚点定位自动跟随</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .topbox {
            height: 500px;
            background-color: #313131;
        }

        .section-content {
            border-bottom: 5px solid #0000FF;
            min-height: 500px;
            background: #eee;
            width: 1200px;
            margin: auto;
            line-height: 500px;
            text-align: center;
        }

        .nav-height {
            position: relative;
            height: 50px;
        }

        .nav-wrap {
            width: 100%;
            height: 50px;
            background: #fff;
        }

            .nav-wrap.navFix {
                position: fixed;
                top: 0;
                left: 0;
                box-shadow: 0 0 5px rgba(0,0,0, 0.2);
                border-bottom: 1px solid #e3e3e3\9;
                z-index: 99999;
            }

            .nav-wrap ul {
                padding: 0;
                margin: 0 auto;
                width: 1200px;
                display: block;
                border-bottom: 2px solid #eee;
            }

            .nav-wrap.navFix ul {
                border-bottom: 0;
            }

            .nav-wrap li {
                display: inline-block;
                text-align: left;
                height: 50px;
                line-height: 50px;
                float: left;
            }

                .nav-wrap li a {
                    display: block;
                    padding: 0 20px;
                    font-size: 20px;
                    color: #333;
                    text-decoration: none;
                }

                    .nav-wrap li a:hover {
                        color: #4680d1;
                    }

                    .nav-wrap li a.active {
                        border-bottom: 2px solid #4680d1;
                        color: #4680d1;
                    }

        .nav-mobile {
            display: none;
            font-weight: bold;
            width: 100%;
        }

        .click-me {
            width: 150px;
            height: 30px;
            background: #4680d1;
            color: white;
            text-align: center;
            line-height: 30px;
        }

            .click-me a {
                display: block;
                color: white;
            }
    </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script src='nav.js'></script>
</head>
<body>
    <div class="topbox"></div>
    <div class="nav-height" id="navHeight">
        <nav class="nav-wrap" id="nav-wrap">
            <div class="nav-mobile">Click</div>
            <ul class="clearfix">
                <li><a class="active" href="#">nav1</a></li>
                <li><a class="" href="#">nav2</a></li>
                <li><a class="" href="#">nav3</a></li>
                <li><a class="" href="#">nav4</a></li>
            </ul>
        </nav>
    </div>

    <div style="height: 1000px;background: #f5f5f5;">footer</div>
    <!--内容信息导航吸顶及锚点引入JS-->

    <script>
		//内容信息导航吸顶
        $(document).ready(function() {
            var navHeight = $("#navHeight").offset().top;
            var navFix = $("#nav-wrap");
            $(window).scroll(function() {
                if ($(this).scrollTop() > navHeight) {
                    navFix.addClass("navFix");
                } else {
                    navFix.removeClass("navFix");
                }
            });
        });
		//内容信息导航锚点
		   $('.nav-wrap').navScroll({
		      mobileDropdown: true,
		      mobileBreakpoint: 768,
		      scrollSpy: true
		    });

		    $('.click-me').navScroll({
		      navHeight: 0
		    });

		    $('.nav-wrap').on('click', '.nav-mobile', function (e) {
		      e.preventDefault();
		      $('.nav-wrap ul').slideToggle('fast');
		    });
    </script>
</body>
</html>
